import { useEffect, useState } from "react";
import Classification from "../components/classification";
import Search from "../components/search";
import Sw from "../components/sw";
import { loadDoctorsAPI } from "../services/home";
import { dalImg } from "../utils/tools";
import { Link } from "react-router-dom";
import { NavBar } from "antd-mobile";

function Home() {
  const [list, setList] = useState([]);
  useEffect(() => {
    loadDoctorsAPI().then((res) => {
      console.log(res);
      setList(res.data.list);
    });
  }, []);
  return (
    <div className="box">
      <NavBar backArrow={false}>香香香皮匠医美</NavBar>

      <div className="search">
        <Search></Search>
      </div>
      <div className="carousel">
        <div className="sw">
          <Sw></Sw>
        </div>
      </div>
      <div className="classification">
        <Classification></Classification>
      </div>

      <h2>名医列表</h2>
      <div className="sp">
        {list.map((item) => (
          <ul className="xiangmu" key={item.id}>
            <Link to={`doctor/${item.id}`}>
              <li>
                <img src={dalImg(item.avatar)} alt="" />
                <p>{item.name}</p>
                <p>{item.desc}</p>
              </li>
            </Link>
          </ul>
        ))}
      </div>
    </div>
  );
}

export default Home;
